<template>
  <page-header-wrapper :title="false">
    <a-card
      :loading="loading"
    >
      <a-card-meta>
        <div slot="title" :style="{ textAlign: 'center' }">
          <h2>{{messageDetail.title}}</h2>
        </div>
        <div slot="description" :style="{ textAlign: 'center' }">
          消息类型：{{msgTypeOpts[messageDetail.msg_type]}} 发布人：{{messageDetail.author}} 发布时间：{{messageDetail.created_at}}
        </div>
      </a-card-meta>
      <div class="ql-editor" :style="{ padding: '0 50px', marginTop: '40px', fontSize: '16px' }" v-html="messageDetail.content">
      </div>
      <a-divider />
      <div :style="{ padding: '0 50px', marginTop: '10px' }">【下载附件】：<a-button v-if="messageDetail.file != ''" type="link" @click="download(messageDetail.file)">{{messageDetail.filename}}</a-button></div>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import MessageDetail from './components/MessageDetail'
import { getEditMsg } from '@/api/message'

export default {
  components: {
    MessageDetail
  },
  name: 'MessageEdit',
  data () {
    return {
      loading: false,
      messageDetail: {},
      msgTypeOpts: {}
    }
  },
  activated () {
    this.getEdit(this.$route.params.id)
  },
  methods: {
    getEdit (id) {
      const app = this
      getEditMsg(id).then(res => {
        app.msgTypeOpts = res.result.msg_type
        app.messageDetail = res.result.msg
      }).finally(() => {
        this.loading = false
      })
    },
    download (file) {
      window.open(file)
    }
  }
}
</script>

<style scoped>

</style>
